<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-10-28 11:56:55
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-11-05 09:33:43
-->
<template>
  <div class="wrapper">

    <!-- 定位组件 -->
    <iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;"
            src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
    </iframe>
    <p>地址{{addr}}</p>
    <p>lat{{lat}}</p>
    <p>lng{{lng}}</p>
  </div>
</template>

<script>

import {mapState} from 'vuex';

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      addr:'',
      lat :'',
      lng :'',
    }
  },
  computed: {
    ...mapState(['addressObj', 'tsForm'])
  },
  async mounted() {
    const that = this;
    // 腾讯地图定位: 选点组件和定位组件
    // https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation
    window.addEventListener('message', function (event) {
      // 接收位置信息
      var loc = event.data;
      console.error('腾讯地图定位：', loc);
      console.error('腾讯地图定位1：', loc.addr);
      console.error('腾讯地图定位2：', loc.lat);
      console.error('腾讯地图定位3：', loc.lng);
      that.addr  = loc.addr
      that.lat  = loc.lat
      that.lng  = loc.lng
      // if (loc && loc.province && !that.addressObj.poiaddress) {
      //   that.form.address = loc.addr ? loc.addr : loc.province + loc.city + loc.district;
      //   console.error('腾讯地图定位2：', that.form.address);
      //
      //   // that.form.address = JSON.stringify(loc)
      //   alert(JSON.stringify(loc))
      // }
    }, false);

  },
  methods: {}

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.xing {
  color: red;
  position: relative;
  top: 0;
  left: 0;
  font-size: 16px;
}

.text_a {
  width: 100%;

  border: none;
  /* height: 120px; */
  /* background-color: #ddd; */

}

.form3 {
  padding: 0 10px;
  background-color: #fff;
  overflow: hidden;
}

.row_h46 {
  height: 46px;
  line-height: 46px;
  text-align: left;
}

.border_none {
  border: none;
}

.border_b {
  border-bottom: 1px solid #ddd;
}

.formOne {
  text-align: left;
  background-color: #fff;
  padding: 0 10px;
  margin-top: 10px;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;
}

.head {
  display: flex;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  text-align: center;

}

.bannner_img {
  height: 150px;
}

.bannner_img img {
  height: 100%;
}

.head_main {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.iconBox {
  margin: 0 10px;
}

.bannerBox {
  height: 200px;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(#303d9c, #1951b4);
}

.banner_text {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
}

.orange_color {
  color: #e39e62;
}


.form1 ul {
  background-color: #fff;
  padding: 0 10px;
}

.form1 li {
  display: flex;
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #ddd;
}

.form1 li:last-child {
  border: none;
}

.row_title {
  width: 150px;
  text-align: left;
}

.form1 li input {
  border: none;
}

.rightIcon {
  position: absolute;
  right: 5px;
  top: 5px;
  color: red;
}

.row_input {
  width: 100%;
  padding: 0 10px;
}
</style>
